﻿<style>
    .panel-title {
        padding: 10px;
    }
</style>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<div class="panel-group" id="accordion">

    @{ int i = 0; }
    @foreach (var item in ViewBag.dr)
    {
        @* 开始 *@
        <div class="panel panel-default">

            <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne_@i">
                    <h4 class="panel-title  text-center ">
                        @item.Key
                    </h4>
                </a>
            </div>

            @* 如果需要显示，则class加in *@
            <div id="collapseOne_@i" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul class="nav nav-stacked text-center nav-pills ">
                        @foreach (var items in item.Value)
                        {
                            <li id="menu_@items.ID" class="menu">
                                @{ string str = items.ResName;}
                                @Ajax.ActionLink(str, "", "", new AjaxOptions { HttpMethod = "post", UpdateTargetId = "box", InsertionMode = InsertionMode.Replace }, new { href = items.Url + "?id=" + items.ID })
                            </li>
                        }
                    </ul>
                </div>
            </div>

        </div>
        i++;
        @* 结束 *@
    }


</div>
<script>
    $(function () {
        $(".menu").click(function () {
            var da = $(this).parent().parent().parent().prev().children().children().text();
            var xiao =$(this).text()
            $("#mianbaoxie li a").eq(1).text(da);
            $("#mianbaoxie li").eq(2).text(xiao);
            $(".menu").removeClass("active")
            $(this).addClass("active");
            
        })
    })
</script>
